<template>
  <div class="admin-container">
    <h2>管理后台</h2>
    <el-card class="admin-card">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="订单管理" name="orders">
          <div class="tab-content">
            <h3>订单管理</h3>
            <!-- 订单管理内容 -->
          </div>
        </el-tab-pane>
        <el-tab-pane label="服务管理" name="services">
          <div class="tab-content">
            <h3>服务管理</h3>
            <!-- 服务管理内容 -->
          </div>
        </el-tab-pane>
        <el-tab-pane label="用户管理" name="users">
          <div class="tab-content">
            <h3>用户管理</h3>
            <!-- 用户管理内容 -->
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AdminPage',
  data() {
    return {
      activeTab: 'orders'
    }
  }
}
</script>

<style scoped>
.admin-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.admin-container h2 {
  margin-bottom: 30px;
  color: #333;
}

.admin-card {
  padding: 20px;
}

.tab-content {
  padding: 20px 0;
}

.tab-content h3 {
  margin-bottom: 20px;
  color: #333;
}
</style> 